import React, { useEffect, useState } from 'react';
import {
    Button, Space, Table, Tag, Drawer, Cascader,
    DatePicker,
    Form,
    Tree,
    Input,
    InputNumber,
    Radio,
    Select,
    Switch,
    message,
    TreeSelect,
  } from 'antd';
  import type { ColumnsType } from 'antd/es/table';
//   import "./Deduct.scss";
  // import * as service from "../../../api/Deduct";
  import { Taxsystem_list,Taxsystem_add,Taxsystem_bianji,Taxsystem_delete } from "../../../api/Taxsystem";
  import { SizeType } from 'antd/es/config-provider/SizeContext';
  
  interface Props {
  
  }
  
  interface DataType {
    id:number;
    taxsystem:string;
    fanan: string;
    buMen: string;
    phone: string;
    zhengJian: string;
    jobNumber: string;
  }
  
  // 这是专项附加扣除页面
  function Taxsystem(props: Props) {
  
    const { Option } = Select;
    let [form] = Form.useForm() //定义表单
    let [dataType, setDataType] = useState<DataType[]>([]) //定义表格组件状态--数据
    let [flag, setFlag] = useState(true)//自定义一个开关
    let [id, setid] = useState(0)
  
    //控制抽屉的显示隐藏
    const [open, setOpen] = useState(false);//定义抽屉开关初始值
  
    // 抽屉关闭时触发 
    const onClose = () => {
      setOpen(false);
      form.setFieldsValue({month:'',education:'',Houserent:'',interest:'',support:'',educate:'',baby:''})
    }
  
    var hergrg = async () => {
      var res = await Taxsystem_list()
      console.log(res.data);
      setDataType(res.data.data)
    }
    useEffect(() => {
      hergrg()
    }, [])
  
    const columns: ColumnsType<DataType> = [
      // {
      //   title: '序号',
      //   // dataIndex: 'name',
      //   key: 'name',
      //   render: (_, record) => <a>{dataType.indexOf(record) + 1}</a>,
      // },

      {
        title: '方案名称',
        // dataIndex: 'age',
        key: 'taxsystem',
        width: '220px',
        render: (_, record) => <div>{record.taxsystem}</div>
      },
      {
        title: '类型',
        // dataIndex: 'age',
        key: 'fanan',
        width: '120px',
        render: (_, record) => <div>{record.fanan}</div>
      },
      {
        title: '是否统计',
        // dataIndex: 'address',
        key: 'buMen',
        width: '150px',
        render: (_, record) => <div>{record.buMen}</div>
      },
      {
        title: '齐整',
        // dataIndex: 'address',
        key: 'phone',
        width: '150px',
        render: (_, record) => <div>{record.phone}</div>
      },
      {
        title: '用户方案',
        // dataIndex: 'address',
        key: 'zhengJian',
        width: '170px',
        // text-aligin:center,
        render: (_, record) => <div>{record.zhengJian}</div>
  
      },
      {
        title: '累计赡养老人',
        // dataIndex: 'address',
        key: 'jobNumber',
        width: '130px',
        render: (_, record) => <div>{record.jobNumber}</div>
  
      },
      {
        title: '操作',
        key: 'tags',
        dataIndex: 'tags',
        render: (_, record) => {
          return <>
            <Button onClick={()=>{ edit(record)}}>编辑</Button>
            <Button onClick={()=>{detel(record.id)}} >删除</Button>
          </>
        }
      },
    ];
  
    const  onFinish =async(value:any)=>{
        if(flag){
            let res=await Taxsystem_add(value)
            console.log(res);
            hergrg()
            setOpen(false)
            message.success({content:'新增成功'})
        }else{
          let jiegouzhi={id,...value}
          let res=await Taxsystem_bianji(jiegouzhi)
          console.log(res);
          hergrg()
          setOpen(false)
          message.success({content:'编辑成功'})
          
        }
    }
    let detel=async(id:number)=>{
      let res=await Taxsystem_delete({id})
          hergrg()
          message.success({content:'删除成功'})
    }
  const onFinishFailed=(errorInfo: any) => {
    console.log(errorInfo)
    // 新增增加按钮
   
  }
  let newAdd= async()=>{
    setOpen(true)
    setFlag(true)
  }
  //编辑数据
  var edit=(item: any) => {
    console.log(item)
    setOpen(true)
    setFlag(false)
    let { id, ...newarr } = item
    setid(id)
    form.setFieldsValue(newarr)
  }
    return (
      <div className='box'>
        <div className='texts'>
          <p style={{ color: '#000' }}>计税规则</p>
        </div>
        <div className='buton'>
          <span>
            <Button type="primary" onClick={()=>{newAdd()}}>增加</Button>
          </span>
          <span>
  
          </span>
        </div>
        <div>
          <Table columns={columns} dataSource={dataType} />
        </div>
        <>
          <Drawer title="Basic Drawer" placement="right" onClose={onClose} open={open}>
            <Form
              form={form}
              // name="basic"
              labelCol={{ span: 8 }}
              wrapperCol={{ span: 16 }}
              style={{ maxWidth: 400 }}
              onFinish={onFinish}
              onFinishFailed={onFinishFailed}
              autoComplete="off"
            >
          <Form.Item label="方案名称"
                name="taxsystem">
                <Input />
              </Form.Item>

              <Form.Item label="类型"
                name="fanan">
                <Input />
              </Form.Item>
  
              <Form.Item
                label="是否统计"
                name="buMen">
                <Input />
              </Form.Item>
  
              <Form.Item label="齐整"
                name="phone">
                <Input />
              </Form.Item>
  
              <Form.Item label="用户方案"
                name="zhengJian">
                <Input />
              </Form.Item>
              <Form.Item label="	累计赡养老人	"
                name="jobNumber">
                <Input />
              </Form.Item>
              <Form.Item label="更新列表">
                <Button type="primary" htmlType="submit">更新</Button>
              </Form.Item>
            </Form>
          </Drawer>
        </>
  
  
  
      </div>
    );
  
  }

export default Taxsystem;